<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="../css_js/swiper-bundle.min.css" />
        <script src="../css_js/swiper-bundle.min.js"></script>
        <title>Tab 切换</title>
        <style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
                -webkit-tap-highlight-color: transparent;
            }
            a {
                text-decoration: none;
                color: #333;
            }
            li {
                list-style: none;
            }
            body {
                padding: 24px;
            }
            .tab-header {
                display: flex;
                justify-content: space-between;
                line-height: 30px;
            }
            .tab-label-active {
                color: #409eff;
                border-bottom: 2px solid #409eff;
            }
            .tab-item {
                line-height: 40px;
                border-bottom: 1px solid #ebebeb;
            }
            .swiper-container{
                width: 100vw;
            }
        </style>
    </head>
    <body>
        <div id="tab-header" class="tab-header">
            <a href="javascript:;" class="tab-label tab-label-active" data-index="0">在线演示</a>
            <a href="javascript:;" class="tab-label" data-index="1">中文教程</a>
            <a href="javascript:;" class="tab-label" data-index="2">获取 Swiper</a>
        </div>
        <div id="tab-content" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <ul>
                        <li class="tab-item">Swiper 基础演示</li>
                        <li class="tab-item">Swiper 精彩应用（移动）</li>
                        <li class="tab-item">Swiper 精彩应用（PC）</li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul>
                        <li class="tab-item">Swiper 使用方法</li>
                        <li class="tab-item">Swiper Animate 使用方法</li>
                        <li class="tab-item">Swiper 与 DOM</li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul>
                        <li class="tab-item">下载 Swiper</li>
                        <li class="tab-item">Swiper CDN 地址</li>
                    </ul>
                </div>
            </div>
        </div>
        <script>
            var title = document.querySelectorAll(".tab-label");
            var header=document.getElementById("tab-header");
            var mySwiper = new Swiper(".swiper-container", {
                on: {
                    //  滑动过渡完成后触发
                    slideChangeTransitionEnd: function () {
                        console.log("当前索引：" + this.activeIndex); //当前索引
                        for (let i = 0; i < title.length; i++) {
                            title[i].classList.remove("tab-label-active");
                        }
                        title[this.activeIndex].classList.add("tab-label-active");
                    },
                },
            });
            header.onclick=(ev)=>{
                mySwiper.slideTo(ev.target.dataset.index, 1000, true);
            }
        </script>
    </body>
</html>
